<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-size: 36px;
      line-height: 5em;
      text-align: center;
      color: aqua;
      background-color: blue;
    }

    /* .baba {
      width: 200px;
      height: 200px;
      background-color: brown;
      margin: 50px;
      position: relative;
    }

    .son {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: chocolate;
      right: -50px;
      bottom: -50px;
    } */
  </style>
</head>

<body>
  <div>11111111111111111</div>

  <!-- <div class="baba baba1">
    <div class="son son1"></div>
  </div> -->

  <!-- <div class="baba baba2">
    <div class="son son1"></div>
  </div> -->

  <a href="http://www.baidu.com">啊啊啊啊</a>

  <script>




    // "dbclick"
    // 双击
    // 在200ms连续点击  //200ms为自定义的
    // 偶数次点击才视为一次双击

    let div = document.querySelector("div")
    // div.addEventListener("dblclick", () => {
    //   console.log("双击");
    // })

    // let count = 0;
    // let isFirstClick = false;

    // div.addEventListener("click", () => {
    //   if (isFirstClick) {
    //     //现在处于完成第一次点击
    //     console.log("双击");
    //     isFirstClick = false;
    //   } else {
    //     //没有点击状态
    //     isFirstClick = true;
    //     setTimeout(() => {
    //       isFirstClick = false
    //     }, 200);
    //   }
    // })

    // div.addEventListener("mousemove",()=>{
    //   div.style.backgroundColor=`rgb(${getColor()})`
    // })



    div.addEventListener("click", (divClick))

    div.addEventListener("click", () => {
      console.log("click绑定事件2");
      div.removeEventListener("click", (divClick))


    })

    // removeEventListener  不用once:ture 的话
    // 对象一致 事件一致 回调一致 
    // div.removeEventListener("click", (divClick))


    function divClick() {
      console.log("click绑定事件1");

    }

    div.onclick = function () {
      console.log("onclick绑定事件1");
    }

    div.onclick = function () {
      console.log("onclick绑定事件2");
      div.onclick = null; //移除事件(指针)
    }




    let baba1 = document.querySelector(".baba1")
    let son1 = document.querySelector(".son1")
    let baba2 = document.querySelector(".baba2")

    let a = document.querySelector("a")
    //阻止默认点击事件
    a.addEventListener("click", () => {
      event.preventDefault();
    })

    //一般用定位就区别两者用法了
    //mouseleave
    // baba1.addEventListener("mouseenter", () => {
    //   console.log("mouseenter");
    //   //移动到里面就行
    // })



    // baba1.addEventListener("click", () => {
    //   console.log("baba");
    // })


    // 这里加上true，冒泡就反过来了,从上级开始触发到下级,冒泡默认是false
    // baba1.addEventListener("click", () => {
    //   console.log("baba");
    // }, true)

    // son1.addEventListener("click", () => {
    //   console.warn("son1");
    // })

    //先捕获(外面开始找)从html开始找,找到baba1有点击事件,再找到son1有点击事件,然后结束;开始冒泡(从里面开始),son1触发然后baba1触发

    // son1.addEventListener("click", () => {
    //   //如果要阻止事件冒泡： 现在想要只触发son1点击事件
    //   event.stopPropagation();
    //   console.warn("son1");
    // })




    //mouseout 
    // baba2.addEventListener("mouseover", () => {
    //   console.log("mouseover");
    //   //上帝视角,先触发儿子然后父亲
    // })

  </script>
</body>

</html>